<template>
    <div>
        <div class="ranking-warpper">
            <ul>
                <li class="item" v-for="(item,index) in lists" :key="index">
                    <router-link class="img" :to='"/ranking/rankList?id="+item.id'><img :src="item.coverImgUrl"></router-link>
                    <div class="topList">
                        <div v-for="(v,i) in item.tracks" :key="i" v-show="i < 3" @click="setId(v.id)">{{i+1}}.{{v.name}} - {{v.ar[0].name}} </div>
                    </div>
                </li>
            </ul>
        </div>
        
    </div>
</template>

<script>
    import {getTopList,getPlaylistDetail} from '../api/ranking'
    export default {
        data() {
            return {
                lists:[],
            }
        },
        methods: {
            setId(id){
                this.$emit("get-player-id",id)
            },

            // 第一种写法start----------------
            // 根据id获取排行数据
            // getTopListData(){
            //     getTopList().then(data =>{
            //         // 遍历id
            //         data.list.forEach(item => {
            //             let id = item.id;
            //             // 传参 rankin.js
            //             getPlaylistDetail({id}).then(data =>{
            //                 this.lists.push(data.playlist)
            //             })
            //         });
            //     })
            // }
            // 第一种写法end----------------

            // 第二种写法-------------------
                getPlaylistDetailFun(list){
                    // 遍历id
                    list.forEach(item => {
                        let id = item.id;
                        // 传参 rankin.js
                        getPlaylistDetail({id}).then(data =>{
                            this.lists.push(data.playlist)
                        })
                    });
                }
        },
        beforeRouteEnter (to, from, next) {
            // 第二种写法
            // 请求一个接口
            getTopList().then(data=>{
                // next();//跳转路由
                // 指定methods数据方法 调用方法
            next(vm=>vm.getPlaylistDetailFun(data.list))
            })
        },
        created() {
            // 调用第一种写法
            // this.getTopListData();
        },
    }
</script>

<style lang="less">
.ranking-warpper{
    margin-top: 86px;
    width: 100%;
    ul{
        width:96%;
        margin: 6px auto 0;
        .item{
            display: flex;
            width: 100%;
            padding: 2px 0;
            border-bottom: 2px solid #e6e7e7;
            &:nth-last-child(1){
                height: 144px;
                border: none;
            }
            .img{
                width: 90px;
                height: 90px;
                border-radius: 5px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
            .topList{
                width: calc(100% - 90px - 16px);
                margin-left: 16px;
                padding-top: 5px;
                div{
                    height: 27px;
                    line-height: 27px;
                    font-size: 12px;
                    color: #4f4f4f;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>